<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
		<link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
		<link rel="stylesheet" href="../js/easyui/themes/icon.css" />
		<script type="text/javascript">
			$(function() {
				//添加选项卡
				$("#czbkLink").click(function() {
					$("#mytables").tabs("add", {
						title: 'new tab',
						selected: "true"
					})
				})
				//右键点击选项卡显示菜单
				$("#mytables").tabs({
					onContextMenu:function(e,title,index) {
						e.preventDefault();
						$('#mm').menu('show', {  
							  left: e.pageX,  
							  top: e.pageY  
							});
													
					}
				});
				 
				//关闭选项卡
				$("#mm").menu({
					
					onClick:function(item){
						//关闭当前选项卡
						if(item.name=="closeThis"){
							
							$("#mytables").tabs("close",'new tab')
						}else {
							
							var tab = $('#mytables').tabs('getSelected'); 
							//当前选项卡的索引
							var index1 = $('#mytables').tabs('getTabIndex',tab); 
							//得到所有的选项卡
							
							var tabs1=$('#mytables').tabs('tabs');
							var length=tabs1.length;
							for(var i=length-1;i>=0;i--){
								
								var index2 = $('#mytables').tabs('getTabIndex',tabs1[i]);
								//关闭其他选项卡
								if(item.name=="closeOther"){
									if(index1!=index2){
										$("#mytables").tabs("close",index2);
									}
								}
								//关闭所有选项卡
								else if(item.name=="closeAll"){
									$("#mytables").tabs("close",index2);
								}
								
								
							}
						}
					}
				});
			})
		</script>
	</head>

	<body class="easyui-layout">

		<div data-options="region:'north',title:'BOS2.0物流管理系统',split:true" style="height:100px;">北部区域</div>

		<div data-options="region:'south',title:'South Title',split:true" style="height:100px;">南部区域</div>

		<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;">东部区域</div>

		<div data-options="region:'west',title:'菜单导航',split:true" style="width:180px;">西部区域

			<div id="aa" class="easyui-accordion" data-options="fit:true">

				<div data-options="title:'基础菜单'" style="padding:10px;">
					<a href="javascript:void(0)" id="czbkLink">传智播客</a>
				</div>

				<div data-options="title:'系统菜单'" style="padding:10px;">

					面板二

				</div>

			</div>
		</div>

		<div data-options="region:'center',title:'中部选项卡'" style="padding:5px;background:#eee;">
			<div id="mytables" class="easyui-tabs" style="height:250px;">
			</div>
		</div>

		<div id="mm" class="easyui-menu" style="width:120px;">
			<div  data-options="name:'closeThis'">关闭当前窗口</div>
			<div data-options="name:'closeOther'">关闭其他窗口</div>
			<div class="menu-sep"></div> <!--分割线-->
			<div data-options = "iconCls:'icon-cancel',name:'closeAll'">关闭全部窗口</div>
		</div>

	</body>

</html>